<template>
    <div>
        <div>
            <Row>
                <Col span="14" style="height: fit-content">
                    <Carousel autoplay loop>
                        <CarouselItem v-for="(item,index) in CarouselCoverList" :key="item" :value="item">
                            <Row type="flex" justify="center">
                                <Col>
                                    <img v-bind:src="CarouselCoverList[index]" style="height:195px;width: auto">
                                </Col>
                            </Row>
                        </CarouselItem>
                    </Carousel>
                </Col>
                <Col span="5">
                    今日特卖
                    <Row v-for="(item,index) in CarouselProductList" :key="item.productId" :value="item.productId">
                        <Col span="18">
                            {{index+1}}:{{item.productName}}
                        </Col>
                        <Col>
                            <Icon type="md-heart"/>
                            {{item.starsNum}}
                        </Col>
                    </Row>
                </Col>
                <Col span="5">
                    销量冠军
                    <Row v-for="(item,index) in topSeller" :key="item.userId" :value="item.userId">
                        <Col span="18">
                            {{index+1}}:{{item.nickName}}
                        </Col>
                        <Col>
                            <Icon type="md-heart"/>
                            {{item.soldNum}}
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
        <div>
            <Row>
                <Col offset="2">
                    <Select v-model="selectedTag" aria-placeholder="物品分类">
                        <Option v-for="tag in tagList" :key="tag.key" :value="tag.value">{{ tag.key }}</Option>
                    </Select>
                </Col>
                <Col offset="3">
                    <Input v-model="searchName" placeholder="请输入商品名"/>
                </Col>
                <Col offset="1">
                    <Select v-model="orderName" value="price" placeholder="排序方式">
                        <Option v-for="item in orderOption" :key="item.key" :value="item.value">{{ item.key }}</Option>
                    </Select>
                </Col>
                <Col offset="1">
                    <Select v-model="asc">
                        <Option value="1">升序</Option>
                        <Option value="0">降序</Option>
                    </Select>
                </Col>
                <Col offset="1">
                    <Button type="Primary" @click="search(1)">搜索</Button>
                </Col>
            </Row>
        </div>
        <Card v-if="totalProductNum==0">
            <Col class="mid">
                啊哦，好像么有找到商品呢
            </Col>
        </Card>
        <Row :gutter="8">
            <Col span="4">
                <Card v-for="(item,index) in leftList" :key="item.productId" :vlaue="item.productId"
                      style="margin-top: 6px">
                    <Row>
                        <img v-if="exist[index*6]" v-bind:src="CoverList[index*6]" style="height: auto;width: 100%">
                        <Col v-else
                             style="display: inline-block;width: 200px;height: 250px;position: relative;border: 1px solid #eee;">
                            <Spin fix size="large">
                                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                                <div>Loading</div>
                            </Spin>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="font-weight: bold">{{ item.productName }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col v-for="tagItem in productTagList[index*6]" :key="tagItem" :value="tagItem">
                            <tag v-if="tagItem==='包邮'" color="success">
                                {{tagItem}}
                            </tag>
                            <tag v-else-if="tagItem==='12期免息'" color="warning">
                                {{tagItem}}
                            </tag>
                            <tag v-else color="default">
                                {{tagItem}}
                            </tag>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="color: orangered;font-weight: bolder">￥：{{ item.price }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p>{{ item.productBrief }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Button size="small" icon="md-heart" v-if="StarsList[index*6]" @click="stars(index*6,0)">
                                {{item.starsNum}}
                            </Button>
                            <Button size="small" v-else icon="md-heart-outline" @click="stars(index*6,1)">
                                {{item.starsNum}}
                            </Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-infinite" @click="brief(item.productId)">详情</Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-cart" @click="addToCart(index*6)"></Button>
                        </Col>
                    </Row>
                    <Row style="height: 30px;margin-top: 3px">
                        <img v-bind:src="AvatarList[index*6]" sizes="15" style="height: 100%;width: auto">
                        <p>{{ item.belongToName }}</p>
                    </Row>
                </Card>
            </Col>
            <Col span="4">
                <Card v-for="(item,index) in leftMidList" :key="item.productId" :vlaue="item.productId"
                      style="margin-top: 6px">

                    <Row>
                        <img v-if="exist[index*6+1]" v-bind:src="CoverList[index*6+1]" style="height: auto;width: 100%">
                        <Col v-else
                             style="display: inline-block;width: 200px;height: 250px;position: relative;border: 1px solid #eee;">
                            <Spin fix size="large">
                                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                                <div>Loading</div>
                            </Spin>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="font-weight: bold">{{ item.productName }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col v-for="tagItem in productTagList[index*6+1]" :key="tagItem" :value="tagItem">
                            <tag v-if="tagItem==='包邮'" color="success">
                                {{tagItem}}
                            </tag>
                            <tag v-else-if="tagItem==='12期免息'" color="warning">
                                {{tagItem}}
                            </tag>
                            <tag v-else color="default">
                                {{tagItem}}
                            </tag>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="color: orangered;font-weight: bolder">￥：{{ item.price }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p>{{ item.productBrief }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Button size="small" icon="md-heart" v-if="StarsList[index*6+1]"
                                    @click="stars(index*6+1,0)">{{item.starsNum}}
                            </Button>
                            <Button size="small" v-else icon="md-heart-outline" @click="stars(index*6+1,1)">
                                {{item.starsNum}}
                            </Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-infinite" @click="brief(item.productId)">详情</Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-cart" @click="addToCart(index*6+1)"></Button>
                        </Col>
                    </Row>
                    <Row style="height: 30px;margin-top: 3px">
                        <img v-bind:src="AvatarList[index*6+1]" sizes="15" style="height: 100%;width: auto">
                        <p>{{ item.belongToName }}</p>
                    </Row>
                </Card>
            </Col>
            <Col span="4">
                <Card v-for="(item,index) in midLeftList" :key="item.productId" :vlaue="item.productId"
                      style="margin-top: 6px">

                    <Row>
                        <img v-if="exist[index*6+2]" v-bind:src="CoverList[index*6+2]" style="height: auto;width: 100%">
                        <Col v-else
                             style="display: inline-block;width: 200px;height: 250px;position: relative;border: 1px solid #eee;">
                            <Spin fix size="large">
                                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                                <div>Loading</div>
                            </Spin>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="font-weight: bold">{{ item.productName }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col v-for="tagItem in productTagList[index*6+2]" :key="tagItem" :value="tagItem">
                            <tag v-if="tagItem==='包邮'" color="success">
                                {{tagItem}}
                            </tag>
                            <tag v-else-if="tagItem==='12期免息'" color="warning">
                                {{tagItem}}
                            </tag>
                            <tag v-else color="default">
                                {{tagItem}}
                            </tag>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="color: orangered;font-weight: bolder">￥：{{ item.price }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p>{{ item.productBrief }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Button size="small" icon="md-heart" v-if="StarsList[index*6+2]"
                                    @click="stars(index*6+2,0)">{{item.starsNum}}
                            </Button>
                            <Button size="small" v-else icon="md-heart-outline" @click="stars(index*6+2,1)">
                                {{item.starsNum}}
                            </Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-infinite" @click="brief(item.productId)">详情</Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-cart" @click="addToCart(index*6+2)"></Button>
                        </Col>
                    </Row>
                    <Row style="height: 30px;margin-top: 3px">
                        <img v-bind:src="AvatarList[index*6+2]" sizes="15" style="height: 100%;width: auto">
                        <p>{{ item.belongToName }}</p>
                    </Row>
                </Card>
            </Col>
            <Col span="4">
                <Card v-for="(item,index) in midRightList" :key="item.productId" :vlaue="item.productId"
                      style="margin-top: 6px">

                    <Row>
                        <img v-if="exist[index*6+3]" v-bind:src="CoverList[index*6+3]" style="height: auto;width: 100%">
                        <Col v-else
                             style="display: inline-block;width: 200px;height: 250px;position: relative;border: 1px solid #eee;">
                            <Spin fix size="large">
                                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                                <div>Loading</div>
                            </Spin>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="font-weight: bold">{{ item.productName }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col v-for="tagItem in productTagList[index*6+3]" :key="tagItem" :value="tagItem">
                            <tag v-if="tagItem==='包邮'" color="success">
                                {{tagItem}}
                            </tag>
                            <tag v-else-if="tagItem==='12期免息'" color="warning">
                                {{tagItem}}
                            </tag>
                            <tag v-else color="default">
                                {{tagItem}}
                            </tag>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="color: orangered;font-weight: bolder">￥：{{ item.price }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p>{{ item.productBrief }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Button size="small" icon="md-heart" v-if="StarsList[index*6+3]"
                                    @click="stars(index*6+3,0)">{{item.starsNum}}
                            </Button>
                            <Button size="small" v-else icon="md-heart-outline" @click="stars(index*6+3,1)">
                                {{item.starsNum}}
                            </Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-infinite" @click="brief(item.productId)">详情</Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-cart" @click="addToCart(index*6+3)"></Button>
                        </Col>
                    </Row>
                    <Row style="height: 30px;margin-top: 3px">
                        <img v-bind:src="AvatarList[index*6+3]" sizes="15" style="height: 100%;width: auto">
                        <p>{{ item.belongToName }}</p>
                    </Row>
                </Card>
            </Col>
            <Col span="4">
                <Card v-for="(item,index) in rightMidList" :key="item.productId" :vlaue="item.productId"
                      style="margin-top: 6px">
                    <Row>
                        <img v-if="exist[index*6+4]" v-bind:src="CoverList[index*6+4]" style="height: auto;width: 100%">
                        <Col v-else
                             style="display: inline-block;width: 200px;height: 250px;position: relative;border: 1px solid #eee;">
                            <Spin fix size="large">
                                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                                <div>Loading</div>
                            </Spin>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="font-weight: bold">{{ item.productName }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col v-for="tagItem in productTagList[index*6+4]" :key="tagItem" :value="tagItem">
                            <tag v-if="tagItem==='包邮'" color="success">
                                {{tagItem}}
                            </tag>
                            <tag v-else-if="tagItem==='12期免息'" color="warning">
                                {{tagItem}}
                            </tag>
                            <tag v-else color="default">
                                {{tagItem}}
                            </tag>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="color: orangered;font-weight: bolder">￥：{{ item.price }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p>{{ item.productBrief }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Button size="small" icon="md-heart" v-if="StarsList[index*6+4]"
                                    @click="stars(index*6+4,0)">{{item.starsNum}}
                            </Button>
                            <Button size="small" v-else icon="md-heart-outline" @click="stars(index*6+4,1)">
                                {{item.starsNum}}
                            </Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-infinite" @click="brief(item.productId)">详情</Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-cart" @click="addToCart(index*6+4)"></Button>
                        </Col>
                    </Row>
                    <Row style="height: 30px;margin-top: 3px">
                        <img v-bind:src="AvatarList[index*6+4]" sizes="15" style="height: 100%;width: auto">
                        <p>{{ item.belongToName }}</p>
                    </Row>
                </Card>
            </Col>
            <Col span="4">
                <Card v-for="(item,index) in rightList" :key="item.productId" :vlaue="item.productId"
                      style="margin-top: 6px">
                    <Row>
                        <img v-if="exist[index*6+5]" v-bind:src="CoverList[index*6+5]" style="height: auto;width: 100%">
                        <Col v-else
                             style="display: inline-block;width: 200px;height: 250px;position: relative;border: 1px solid #eee;">
                            <Spin fix size="large">
                                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                                <div>Loading</div>
                            </Spin>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="font-weight: bold">{{ item.productName }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col v-for="tagItem in productTagList[index*6+5]" :key="tagItem" :value="tagItem">
                            <tag v-if="tagItem==='包邮'" color="success">
                                {{tagItem}}
                            </tag>
                            <tag v-else-if="tagItem==='12期免息'" color="warning">
                                {{tagItem}}
                            </tag>
                            <tag v-else color="default">
                                {{tagItem}}
                            </tag>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p style="color: orangered;font-weight: bolder">￥：{{ item.price }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <p>{{ item.productBrief }}</p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Button size="small" icon="md-heart" v-if="StarsList[index*6+5]"
                                    @click="stars(index*6+5,0)">{{item.starsNum}}
                            </Button>
                            <Button size="small" v-else icon="md-heart-outline" @click="stars(index*6+5,1)">
                                {{item.starsNum}}
                            </Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-infinite" @click="brief(item.productId)">详情</Button>
                        </Col>
                        <Col>
                            <Button size="small" icon="md-cart" @click="addToCart(index*6+5)"></Button>
                        </Col>
                    </Row>
                    <Row style="height: 30px;margin-top: 3px">
                        <img v-bind:src="AvatarList[index*6+5]" sizes="15" style="height: 100%;width: auto">
                        <p>{{ item.belongToName }}</p>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Col class="mid">
            <Page :total="totalProductNum" @on-change="search" page-size="24" show-total/>
        </Col>
    </div>
</template>

<script>
    import axios from "axios";
    import globalData from "@/utils/globalData";
    import tag from "@/utils/tag";

    export default {
        name: "ProductShow",
        data() {
            return {
                topSeller: [],
                exist: [],
                searchName: "",
                orderName: "saleDate",
                asc: '1',
                nowPage: 1,
                CoverList: [],
                AvatarList: [],
                CarouselCoverList: [],
                CarouselProductList: [],
                selectedTag: '',
                tagList: [],
                productTagList: [[]],
                StarsList: [],
                orderOption: [
                    {value: "price", key: "价格"},
                    {value: "saleDate", key: "发布日期"},
                    {value: "starsNum", key: "点赞数"},
                    {value: "commentsNum", key: "评论数"},
                ],
                totalProductNum: 0,
                productList: [],
                leftList: [],
                leftMidList: [],
                midLeftList: [],
                midRightList: [],
                rightMidList: [],
                rightList: []
            }
        },
        created: function () {
            let self = this
            this.tagList = tag.tag
            //请求点赞数最高的前5个
            axios({
                method: 'get',
                url: 'product/topF'
            }).then(function (res) {
                let mySelf = self
                //然后获取它们的封面
                for (let i = 0; i < res.data.content.length; i++) {
                    self.CarouselProductList.push(res.data.content[i])
                    axios({
                        method: 'get',
                        url: "/file/sig/product/" + self.CarouselProductList[i].coverUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        mySelf.$set(mySelf.CarouselCoverList, i, window.URL.createObjectURL(res.data))
                    })
                }
            })
            axios({
                method: 'get',
                url: 'user/topSeller'
            }).then(function (res) {
                self.topSeller = res.data
            })
            for (let i = 0; i < 24; i++)
                this.CoverList[i] = ''

            axios({
                method: 'get',
                url: 'product/list/saleDate/1/1'
            }).then(function (res) {
                let mySelf = self
                self.productList = res.data.content
                self.leftList.splice(0, self.leftList.length)
                self.rightList.splice(0, self.rightList.length)
                self.leftMidList.splice(0, self.leftMidList.length)
                self.midRightList.splice(0, self.midRightList.length)
                self.rightMidList.splice(0, self.rightMidList.length)
                self.leftMidList.splice(0, self.leftMidList.length)
                for (let i = 0; i < self.productList.length; i++) {
                    if (i % 6 === 0) {
                        self.leftList.push(self.productList[i])
                    } else if (i % 6 === 1) {
                        self.leftMidList.push(self.productList[i])
                    } else if (i % 6 === 2) {
                        self.midLeftList.push(self.productList[i])
                    } else if (i % 6 === 3) {
                        self.midRightList.push(self.productList[i])
                    } else if (i % 6 === 4) {
                        self.rightMidList.push(self.productList[i])
                    } else {
                        self.rightList.push(self.productList[i])
                    }
                    //请求图片封面
                    axios({
                        method: 'get',
                        url: "/file/sig/product/" + self.productList[i].coverUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        //good
                        mySelf.$set(mySelf.CoverList, i, window.URL.createObjectURL(res.data))
                        mySelf.$set(mySelf.exist, i, true)
                    })
                    //请求商家头像
                    axios({
                        method: 'get',
                        url: "/file/sig/avatar/" + self.productList[i].sellerUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        mySelf.$set(mySelf.AvatarList, i, window.URL.createObjectURL(res.data))
                    })
                    //获取单个tag
                    let sigTagList = self.productList[i].tag.split('-')
                    sigTagList.pop()
                    self.productTagList.push(sigTagList)
                }
                self.totalProductNum = res.data.totalElements
                //请求点赞列表
                let starsListQueryTemp = {
                    productIdList: []
                }
                starsListQueryTemp.userId = globalData.USER.userId
                for (let i = 0; i < self.productList.length; i++) {
                    starsListQueryTemp.productIdList.push(self.productList[i].productId)
                }
                axios({
                    method: 'post',
                    url: 'product/stars/isSList',
                    data: starsListQueryTemp
                }).then(function (res) {
                    mySelf.StarsList = res.data
                })
            })
        },
        methods: {
            stars(index, act) {
                let self = this
                //后端
                axios({
                    method: 'patch',
                    url: 'product/stars/' + act + '/' + this.productList[index].productId + "/"
                        + globalData.USER.userId + "/" + this.productList[index].productName + "/"
                        + this.productList[index].coverUUID
                }).then(function (res) {
                    if (act == 1) {
                        if (res.data) {//如果成功点赞
                            self.$Notice.success({
                                title: "点赞成功！",
                            })
                            self.productList[index].starsNum += 1
                            self.$set(self.StarsList, index, true)
                        } else {
                            self.$Notice.warning({
                                title: "您已赞过",
                            })
                            self.$set(self.StarsList, index, true)
                        }
                    } else {
                        self.productList[index].starsNum -= 1
                        self.$set(self.StarsList, index, false)
                    }
                })
            },
            brief(val) {
                this.$router.push({name: 'ProductBrief', params: {productId: val}});
            },
            addToCart(index) {
                let self = this
                axios({
                    method: 'post',
                    url: '/cart',
                    data: {
                        userId: globalData.USER.userId,
                        productId: this.productList[index].productId,
                        productName: this.productList[index].productName,
                        price: this.productList[index].price,
                        sellerId: this.productList[index].belongToId,
                        sellerName: this.productList[index].belongToName,
                        coverUUID: this.productList[index].coverUUID,
                        sellerUUID: this.productList[index].sellerUUID
                    }
                }).then(function (res) {
                    if (res.data) {
                        self.$Notice.success({
                            title: "已添加至购物车"
                        })
                    } else {
                        self.$Notice.warning({
                            title: "请勿重复添加"
                        })
                    }
                })
            },
            handlePage(value) {
                this.nowPage = value
                console.log(this.nowPage)
                this.search()
            },
            search(value) {
                this.nowPage = value
                let self = this
                let url = ""
                console.log("TAG" + this.selectedTag)
                this.exist.splice(0,this.exist.length)
                this.productTagList.splice(0, this.productTagList.length)
                if (this.searchName === "" && this.selectedTag === "")
                    url = "/product/list/" + this.orderName + "/" + this.asc + "/" + this.nowPage
                if (this.searchName !== "" && this.selectedTag === "")
                    url = "/product/PNC/" + this.searchName + "/" + this.orderName + "/" + this.asc + "/" + this.nowPage
                if (this.searchName === "" && this.selectedTag !== "")
                    url = "/product/tag/" + this.selectedTag + "/" + this.orderName + "/" + this.asc + "/" + this.nowPage
                if (this.searchName !== "" && this.selectedTag !== "")
                    url = "/product/PNCTAG/" + this.searchName + "/" + this.selectedTag + "/"
                        + this.orderName + "/" + this.asc + "/" + this.nowPage
                axios({
                    method: 'get',
                    url: url
                }).then(function (res) {
                    self.productList = res.data.content
                    self.AvatarList.splice(0, self.AvatarList.length)
                    self.CoverList.splice(0, self.CoverList.length)

                    self.leftList.splice(0, self.leftList.length)
                    self.midLeftList.splice(0, self.midLeftList.length)
                    self.leftMidList.splice(0, self.leftMidList.length)
                    self.rightMidList.splice(0, self.rightMidList.length)
                    self.midRightList.splice(0, self.midRightList.length)
                    self.rightList.splice(0, self.rightList.length)
                    self.productTagList.splice(0, self.productTagList.length)

                    for (let i = 0; i < self.productList.length; i++) {
                        //获取封面
                        axios({
                            method: 'get',
                            url: "/file/sig/product/" + self.productList[i].coverUUID,
                            responseType: 'blob'
                        }).then(function (res) {
                            //good
                            self.$set(self.CoverList, i, window.URL.createObjectURL(res.data))
                            self.$set(mySelf.exist, i, true)
                        })
                        if (i % 6 === 0) {
                            self.leftList.push(self.productList[i])
                        } else if (i % 6 === 1) {
                            self.leftMidList.push(self.productList[i])
                        } else if (i % 6 === 2) {
                            self.midLeftList.push(self.productList[i])
                        } else if (i % 6 === 3) {
                            self.midRightList.push(self.productList[i])
                        } else if (i % 6 === 4) {
                            self.rightMidList.push(self.productList[i])
                        } else {
                            self.rightList.push(self.productList[i])
                        }
                        let sigTagList = self.productList[i].tag.split('-')
                        sigTagList.pop()
                        self.productTagList.push(sigTagList)
                    }
                    self.totalProductNum = res.data.totalElements
                    //获取点赞列表
                    let starsListQueryTemp = {
                        productIdList: []
                    }
                    starsListQueryTemp.userId = globalData.USER.userId
                    for (let i = 0; i < self.productList.length; i++) {
                        starsListQueryTemp.productIdList.push(self.productList[i].productId)
                    }
                    let mySelf = self
                    axios({
                        method: 'post',
                        url: 'product/stars/isSList',
                        data: starsListQueryTemp
                    }).then(function (res) {
                        mySelf.StarsList = res.data
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .mid {
        position: relative;
        margin: 0 auto;
        text-align: center;
    }

    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }
</style>